<template>
  <div>
<!--    文章发帖-->
    <el-container>
      <base-header :simple=true>
        <el-col :span="4" :offset="2">
          <div class="write-info" style="color: black">写文章</div>
        </el-col>
        <el-col :span="4" :offset="6">
          <div class="write-btn">
            <el-button size="small"  style="color: white;background-color: #0066ff;border-color: #0066ff;" @click="publishShow">发布</el-button>
            <el-button size="small"  style="color: white;background-color: #0066ff;border-color: #0066ff;" @click="cancel">取消</el-button>
          </div>
        </el-col>
      </base-header>
      <el-container class="area write-box">
        <el-main class="write-main">
          <div >
            <input v-model="articleForm.title" class="write-title"placeholder="请输入标题(最多40字)">
            </input>
          </div>
          <div id="placeholder" style="visibility: hidden;height: 89px;display: none;">什么东西</div>
          <markdown-editor :editor="articleForm.editor" class="write-editor"></markdown-editor>
        </el-main>
      </el-container>

      <el-dialog title="文章摘要"
                 :visible.sync="publishVisible"
                 :close-on-click-modal=false
                 custom-class="dialog">

        <el-form :model="articleForm" ref="articleForm" :rules="rules">
          <el-form-item prop="summary">
            <el-input type="textarea"
                      v-model="articleForm.summary"
                      :rows="6"
                      show-word-limit="true"
                      placeholder="请输入摘要">
            </el-input>
          </el-form-item>
          <el-form-item label="文章分类" prop="category">
            <el-select v-model="articleForm.category" value-key="id" placeholder="选择文章分类">
              <el-option v-for="c in categorys" :key="c.id" :label="c" :value="c"></el-option>
            </el-select>
          </el-form-item>

<!--          <el-form-item label="文章标签" prop="tags">
            <el-checkbox-group v-model="articleForm.tags">
              <el-checkbox v-for="t in tags" :label="t.id" name="tags">{{t}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>-->
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="publishVisible = false">取 消</el-button>
          <el-button type="primary" @click="publish('articleForm')">发布</el-button>
        </div>

      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import markdownEditor from "@/components/markdownEditor";
import BaseHeader from "@/components/common/BaseHeader";
import {publishArticle} from "@/api/article";

export default {
  name: "articleWrite",
  components:{
    markdownEditor,
    BaseHeader
  },
  data() {
    return{
      publishVisible: false,
      categorys: ['前端','后端','数据库','数据结构','服务器'],
      // tags: ['Spring','Java','数据库','服务器'],
      articleForm: {
        id: '',
        title: '',
        summary: '',
        category: '',
        // tags: [],
        editor: {
          value: '',
          ref: '',//保存mavonEditor实例
          default_open: 'edit',
          toolbars: {
            bold: true, // 粗体
            italic: true, // 斜体
            header: true, // 标题
            underline: true, // 下划线
            strikethrough: true, // 中划线
            mark: true, // 标记
            superscript: true, // 上角标
            subscript: true, // 下角标
            quote: true, // 引用
            ol: true, // 有序列表
            ul: true, // 无序列表
            imagelink: true, // 图片链接
            code: true, // code
            fullscreen: true, // 全屏编辑
            readmodel: true, // 沉浸式阅读
            help: true, // 帮助
            undo: true, // 上一步
            redo: true, // 下一步
            trash: true, // 清空
            navigation: true, // 导航目录
            subfield: true, // 单双栏模式
            preview: true, // 预览
          }
        }
      },
      rules: {
        summary: [
          {required: true, message: '请输入摘要', trigger: 'blur'},
          {max: 500, message: '不能大于500个字符', trigger: 'blur'}
        ],
        category: [
          {required: true, message: '请选择文章分类', trigger: 'change'}
        ],
    /*    tags: [
          {type: 'array', required: true, message: '请选择标签', trigger: 'change'}
        ]*/
      }
    }
  },
  methods:{
    publish(articleForm) {
      this.$refs[articleForm].validate((valid) => {
        if (valid) {

    /*      let tags = this.articleForm.tags.map(function (item) {
            return {id: item};
          });*/

          let article = {
            // id: this.articleForm.id,
            title: this.articleForm.title,
            summary: this.articleForm.summary,
            category: this.articleForm.category,
            // tags: tags,
            // body: {
            content: this.articleForm.editor.value,
            contentHtml: this.articleForm.editor.ref.d_render
            // }
          }
          // console.log(article.body.content)
          // console.log(article.body.contentHtml)

          this.publishVisible = false;

          let loading = this.$loading({
            lock: true,
            text: '文章发布中，请稍后'
          })

          publishArticle(this.$store.state.token,article).then((res) => {
            if(res.data.success){
              loading.close();
              this.$message({message: '发布成功', type: 'success', showClose: true})

              this.$router.push({path: `/article/view/${res.data.data}`})
            }else{
              this.$message({message: error, type: '发布文章失败:'+res.data.msg, showClose: true});
            }
          }).catch((error) => {
            loading.close();
            if (error !== 'error') {
              this.$message({message: error, type: 'error', showClose: true});
            }
          })
        } else {
          return false;
        }
      });
    },
    publishShow(){
      if (!this.articleForm.title) {
        this.$message({message: '标题不能为空哦', type: 'warning', showClose: true})
        return
      }

      if (this.articleForm.title.length > 30) {
        this.$message({message: '标题不能大于30个字符', type: 'warning', showClose: true})
        return
      }

      if (!this.articleForm.editor.ref.d_render) {
        this.$message({message: '内容不能为空哦', type: 'warning', showClose: true})
        return
      }
      this.publishVisible = true;
    },
    cancel() {
      this.$router.back()
    }
  }

}
</script>

<style scoped>
  .el-header {
    position: fixed;
    z-index: 1024;
    min-width: 100%;
    box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
  }

  .write-info {
    line-height: 60px;
    font-size: 18px;
    font-weight: 600;
  }

  .write-btn {
    margin-top: 10px;
  }

  .write-box {
    max-width: 900px;
    margin: 80px auto 0;
  }

  .write-main {
    padding: 0;
  }

  .write-title {
    width: 898px;
    height: 60px;
    border:0;
    outline: none;
    color: black;
    font-weight: bold;
    font-size: 28px;
    text-indent:10px;
  }

  .write-editor {
    min-height: 650px !important;
  }
  .markdown-body {
    margin-top: 5px;
  }


  .header-left {
    margin-top: 10px;
  }

  .title img {
    max-height: 2.4rem;
    max-width: 100%;
  }

  .write-toolbar-fixed {
    position: fixed;
    width: 700px !important;
    top: 60px;
  }

  .v-note-op {
    box-shadow: none !important;
  }

  .auto-textarea-input, .auto-textarea-block {
    font-size: 18px !important;
  }

</style>
